 <!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:37
-->
<template>
  <div class="project">
    <div class="wrapper">
      <div class="title">{{projectDetails.name}}</div>
      <div class="info">{{projectDetails.beginTime | fmtDate}}~{{projectDetails.endTime | fmtDate}}|{{projectDetails.region}}</div>
      <div class="details" v-html="projectDetails.details"></div>
        <!-- 报名按钮 -->

      <div class="btn" @click="applyHandler(projectDetails.id)">
        <el-button type="primary" plain>报名</el-button>
      </div>
        <!-- 报名按钮 -->

    </div>
  </div>
</template>
<script>
import {get} from "../utils/request"
export default {
  data(){
    return{
      id:'',
      projectDetails:{},
    }
  },
  methods:{
    //查询项目的详细信息
    findProjectDetails(){
      //数据交互
      get('/index/project/findById?id='+this.id).then(res=>{
        console.log(res);
        if(res.status==200) {
          this.projectDetails=res.data
        }else{
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    // 报名按钮跳转页面
    applyHandler(id){
      this.$router.push({path:'/apply',query:{id:id}})
    }
  },
  created(){
    //拿到从上一个页面传过来的id值
    this.id = this.$route.query.id
    this.findProjectDetails()
  }
}
</script>
<style lang="scss" scoped>
.project{
  .wrapper{
    width:980px;
    .title{
      font-size: 20px;
      line-height: 3em;
      text-align: center;
      color: #333;
      font-weight: 700;
    }
    .info{
      text-align: center;
      line-height: 2em;
    }
    .btn{
      text-align: center;
      margin:2em;
    }
  }
}
</style>